<template>
	<view class="container">
		<view class="title">应急预案考核</view>
		<view class="chart">
			<canvas canvas-id="canvasArcbar" class="charts"></canvas>
		</view>
		<view class="score">分数</view>
		<view class="p">共{{ form.num || 0 }}道题，答对{{ form.right_num || 0 }}道，{{ form.point_one || 0 }}分/题</view>
		<view class="p">考试用时：{{ form.use_time || '00:00' }}</view>
		<image v-if="form.point < form.pass_point" src="../../../static/img/risk/uncheck.png"></image>
		<image v-else src="../../../static/img/risk/checked.png"></image>
		<view class="p">{{ form.point < form.pass_point ? '考试不合格' : '考试合格' }}！({{ form.pass_point }}分及格)</view>
		<view class="space"></view>
		<view><button @click="toPage('detail')" type="primary" size="mini">关闭</button></view>
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js';
let _this;

export default {
	data() {
		return {
			form: {}
		}
	},
	onLoad() {
		_this = this;
		_this.form = uni.getStorageSync('exam_result_data') || {};
		
		// 处理得分
		let score = _this.form.point;
		let color = '#f04864';
		if(score >= 60 && score < 80) color = '#F2D103';
		if(score >= 80)  color = '#1692DA';
		_this.showArcbar('canvasArcbar', [{data: score * 0.01, color: color}]);
	},
	onBackPress(){
		uni.navigateBack({
			delta: 2
		})
	},
	methods: {
		// 跳转
		toPage(url){
			uni.redirectTo({url});
		},
		// 得分
		showArcbar(canvasId, series){
			new uCharts({
				$this:_this,
				canvasId: canvasId,
				type: 'arcbar',
				fontSize:11,
				series: series,
				colors: [series[0].color],
				animation: true,
				width: uni.upx2px(300),
				height: uni.upx2px(300),
				title: {
					name: series[0].data * 100,
					color: '#000',
					fontSize: 30
				},
				subtitle: {
					name: '分',
					color: '#000',
					fontSize: 15
				},
				extra: {
					arcbar:{
						type:'default',
						width: uni.upx2px(10)
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	background: #fff;
	text-align: center;
}
.title{
	font-size: 36upx;
	font-weight: 600;
}
.score{
	font-size: 30upx;
}
.p{
	font-size: 32upx;
	margin-top: 16upx;
}
image{
	width: 140upx;
	height: 160upx;
	margin-top: 20upx;
}
.space{
	height: 40upx;
}
button{
	width: 340upx;
	font-size: 28upx;
	margin-top: 10upx;
	background-color: #1692DA;
}


/*得分*/
.chart{
	height: 300upx;
	margin-top: 40upx;
	position: relative;
}
.charts {
	width: 300upx;
	height: 300upx;
	position: absolute;
	left: calc(50% - 150upx);
	top: 0;
}
</style>
